
.slideout-header {
  height: 48px;
  padding: 5px 10px;
  box-sizing: border-box;
  border-bottom: 1px solid #EEE;
  background: inherit;
  position: relative;
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
}

.slideout-header--text {
  line-height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slideout-header--buttons {
  box-sizing: border-box;
  position: relative;
}

.slideout-btn--close, .slideout-btn--fill {
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 50%;
  outline: none;
  background: none;

  svg {
    fill: #5d616f;
    vertical-align: -2px;
  }

  &:hover {
    border-color: rgba(146, 146, 154, 0.63);

    svg {
      fill: #1C1F2E;
    }
  }

  &:active {
    background-color: rgba(146, 146, 154, 0.63);

    svg {
      fill: #222326;
    }
  }
}

.slideout-btn--fill {
  svg:first-child {
    display: inline-block;
  }

  svg:last-child {
    display: none;
  }
}

.slideout-dock--right {
  > .slideout-panel {
    > .slideout-header .slideout-btn--close svg {
      transform: rotate(90deg);
    }
  }
}

.slideout-dock--bottom {
  > .slideout-panel {
    > .slideout-header {
      .slideout-btn--close svg {
        transform: rotate(180deg);
      }
    }
  }
}

.slideout-dock--left {
  > .slideout-panel {
    > .slideout-header {
      .slideout-btn--close svg {
        transform: rotate(-90deg);
      }
    }
  }
}
